<template>
  <div class="openDoor">
    <hunk-head customEvent="true" @headFn="gobanck" name="带看开门" @tabBarHead = 'tabBarHead' icon="back"></hunk-head>
    <div class="content">
      <hunk-list class="flex1" :list="houseList" @clickitem="clickitem" @clickBtn="clickBtn" @searchInput="searchInput" @onRefresh="onRefresh"></hunk-list>
    </div>
    <!-- 选择门锁 -->
    <uni-popup ref="popup" type="center">
      <div class="popup1">
        <div class="con-head">
          选择门锁
          <img @click="closePupop(0)" v-if="baseUrl" :src="baseUrl+'order/close.png'" alt="" srcset="">
        </div>
        <div class="btn1" @click="openPopup(0)">大门门锁</div>
        <div class="btn2" @click="openPopup(1)">房间门锁</div>
      </div>
    </uni-popup>
    <!-- 单个开门加获取密码 -->
    <uni-popup ref="popup1" type="center">
      <div class="popup-content">
        <div class="con-head">{{itemInfo.address}}</div>
        <div class="con-img">
          <img @click="openDoor(1)" v-if="baseUrl" :src="baseUrl+'opendoor/opendoor.gif'" alt="">
        </div>
        <div class="con-btn">
          <button type="submit" @click="closePupop(1)">关闭</button>
        </div>
        <div class="getpassword" @click="getPassword(1)">
          <div>
            获取
          </div>
          <div>
            密码
          </div>
        </div>
      </div>
    </uni-popup>
    <!-- 开锁成功 -->
    <uni-popup ref="popup2" type="center">
      <div class="open-success">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/success.png'" alt="">
        <div class="text1">开锁成功</div>
        <div class="text2">开锁成功请开门</div>
        <button type="submit" @click="closePupop(2)">确定</button>
      </div>
    </uni-popup>
    <!-- 获取密码成功 -->
    <uni-popup ref="popup3" type="center">
      <div class="mima-success">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/success.png'" alt="">
        <div class="text1">{{password}}</div>
        <div class="text2">请输完密码后请按门锁右下角的“#”开门 温馨提示：本密码使用一次后失效</div>
        <button class="btn1" type="submit" @click="closePupop(3)">确定</button>
        <!-- <button class="btn2" type="submit">密码无法开门请点我</button> -->
      </div>
    </uni-popup>
    <!-- 提醒打开蓝牙 -->
    <uni-popup ref="popup4" type="center">
      <div class="lanya">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/jg.png'" alt="">
        <div class="text">请靠近门锁打开蓝牙</div>
        <div class="text">并按门锁任意键激活</div>
        <button class="btn1" type="submit" @click="closePupop(4)">确定</button>
      </div>
    </uni-popup>
    <!-- 两个开门按钮 -->
    <uni-popup ref="popup5" type="center">
      <div class="lockall">
        <div class="con-head">
          <!-- <div>{{itemInfo.address}}{{itemInfo.roomno}}</div> -->
          <div>{{itemInfo.address}}</div>
          <img @click="closePupop(5)" v-if="baseUrl" :src="baseUrl+'order/close.png'" alt="" srcset="">
        </div>
        <div class="con-btn">
          <img class="openB" @click="openBiglock(0)" v-if="baseUrl" :src="baseUrl+'tenant/home/openBig.png'">
          <img class="openS" @click="openSmllock(1)" v-if="baseUrl" :src="baseUrl+'tenant/home/openSmail.png'">
        </div>
        <div class="getpassword" @click="gotocheck">
          获取密码
        </div>
      </div>
    </uni-popup>
    <!-- 选择密码 -->
    <uni-popup ref="popup6" type="center">
      <div class="popup1">
        <div class="con-head">
          选择密码
          <img @click="closePupop(6)" v-if="baseUrl" :src="baseUrl+'order/close.png'" alt="" srcset="">
        </div>
        <div class="btn1" @click="openMima(0)">大门密码</div>
        <div class="btn2" @click="openMima(1)">房间密码</div>
      </div>
    </uni-popup>
    <!-- 提醒初级用户 -->
    <uni-popup ref="popup7" type="center">
      <div class="lanya2">
        <img v-if="baseUrl" :src="baseUrl+'opendoor/jg.png'" alt="">
        <div class="text text1">您的房间为初级用户，无法开门。如需开门服务，请联系房东开通高级用户服务</div>
        <button class="btn1" type="submit" @click="closePupop(7)">确定</button>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import List from '@componentsMine/list'
import { getHouseList } from '@/apis/housesInfo'
import { getLockPassword, openDoorSave } from '@/apis/opendoor'
var smartLock = requirePlugin("smartLock")
import { bluetooth_lock } from '@utils/lockConfig';
export default {
  components: {
    'hunk-head': Head,
    'hunk-list': List
  },
  data() {
    return {
      interstitialAd: null,
      addresslike: '',  //模糊查询
      houseattribute: [],  // 出租方式 0-自持 1-托管
      housetype: [],  // 0-空 1-已租 2-欠租 3-接近交租 4-租约快到期 5-未绑定门锁
      outtype: [],  //出租方式 0-合租 1-整租
      houseList: [],
      itemInfo: {
        address:'',
        roomno:''
      },
      doorType: 0,
      password: 0,
      message:''
    }
  },
  created(){
    this.getHouseList()
  },
  computed: {
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    }
  },
  methods: {
    gobanck(){
      uni.redirectTo({ url: '/pages/index/index' })
    },
    onRefresh(){
      this.getHouseList()
    },
    // （灰色，不允许带看、租客入住、延长授权、分享等操作）
    searchInput(item){
      this.addresslike = item
      this.getHouseList()
    },
    clickBtn(item){
      console.log('获取item',item)
      let arr = item.split(',')
      console.log('点击按钮',arr)
      this[arr[0]] = arr
      this[arr[0]].shift()
      this.getHouseList()
    },
    clickitem(item){
      this.itemInfo = item
      // item.outtype = 0
      if(item.isitem != 0){
        this.itemInfo = item
        if(this.itemInfo.outtype == 1){ //整租
          this.$refs.popup1.open()
        }else{
          console.log('合租',this.itemInfo.locknumber)
          // 合租
          if(this.itemInfo.locknumber){
            // 合租 卧室有门锁 展示两个图
            this.$refs.popup5.open()
          }else{
            // 合租 卧室没门锁
            this.$refs.popup1.open()
          }
        }
      }else{
          uni.showToast({
            title: '未绑定门锁,无法带看',
            icon: 'none'
          })
      }
    },
    // openPopup(id) {
    //   this.doorType = id
    //   this.$refs.popup1.open()
    //   this.$refs.popup.close()
    // },
    isfictitious(int){
      let isflag = 0
      if(int==1){
        isflag = this.itemInfo.biglocknumber ? this.itemInfo.bigisfictitious : this.itemInfo.roomisfictitious
      }else{
        isflag = this.doorType ? this.itemInfo.roomisfictitious : this.itemInfo.bigisfictitious
      }
      if(isflag){
        this.$refs.popup7.open()
        this.$refs.popup1.close()
        this.$refs.popup5.close()
        this.$refs.popup6.close()
        return true
      }else{
        return false
      }
    },
    openDoor(int) {
    if (this.$store.state.baseStore.userInfo.usertype == 1) { 
      if(wx.createInterstitialAd){
        this.interstitialAd = wx.createInterstitialAd({ adUnitId: 'adunit-b7624e2779b6167a' })
        this.interstitialAd.onLoad(() => {
          console.log('onLoad event emit')
        })
        this.interstitialAd.onError((err) => {
          console.log('onError event emit', err)
        })
        this.interstitialAd.onClose((res) => {
          console.log('onClose event emit', res)
        })
      }
      this.interstitialAd.show().then().catch(err => {
        console.log(err)
      })
    }
      let that = this
      let isflag = this.isfictitious(int)
      if(isflag) return
      smartLock.initSmartLock(bluetooth_lock.appid, bluetooth_lock.appkey, bluetooth_lock.user, bluetooth_lock.password, (res) => {
        let tLockId = ''
        if(int==1){
          tLockId = that.itemInfo.biglocknumber ? that.itemInfo.biglocknumber : that.itemInfo.locknumber
        }else{
          tLockId = that.doorType ? that.itemInfo.locknumber : that.itemInfo.biglocknumber//设备号
        }
        let clockType = ''
        if(int==1){
          clockType = that.itemInfo.biglocknumber ? 0 : 1
        }else{
          clockType = that.doorType ? 1 : 0//设备号
        }
        if (res.data.result === 0) {
          // 检测开门权限
          //需要initSmartLockPlus回调成功后才有效调用开锁接口
          smartLock.openCloseBleLock(tLockId, 1, function(res) {
            console.log("smartLock openCloseBleLock result: " + JSON.stringify(res.data))
            that.closePupop(1)
            that.closePupop(5)
            if (res.data.result == 0) {
              that.$refs.popup2.open()
              that.openDoorSave(1,clockType)
            } else if(res.data.result == 1) {
              that.$refs.popup4.open()
              that.openDoorSave(0,clockType)
            }else{
              that.openDoorSave(0,clockType)
              uni.showToast({
                title: res.data.msg,
                icon: 'error'
              })
            }
          })
            
        }
      })
    },
    getPassword(int) {
    if (this.$store.state.baseStore.userInfo.usertype == 1) { 
      if(wx.createInterstitialAd){
        this.interstitialAd = wx.createInterstitialAd({ adUnitId: 'adunit-b7624e2779b6167a' })
        this.interstitialAd.onLoad(() => {
          console.log('onLoad event emit')
        })
        this.interstitialAd.onError((err) => {
          console.log('onError event emit', err)
        })
        this.interstitialAd.onClose((res) => {
          console.log('onClose event emit', res)
        })
      }
      this.interstitialAd.show().then().catch(err => {
        console.log(err)
      })
    }
      let isflag = this.isfictitious(int)
      if(isflag) return
      console.log('int',int,'this.doorType',this.doorType)
      let locknum = ''
      if(int == 1){
        locknum =  this.itemInfo.biglocknumber ? this.itemInfo.biglocknumber : this.itemInfo.locknumber
      }else{
        locknum = this.doorType ? this.itemInfo.locknumber : this.itemInfo.biglocknumber
      }
      const data = {
        locknumber: locknum
      }
      getLockPassword(data).then(res =>{
        if(res.code == 200){
          this.password = res.data
          this.$refs.popup3.open()
          this.closePupop(int)
        }else{
          this.closePupop(int)
        }
      })
    },
    openDoorSave(int,type){
      let data = {
        "houseid": this.itemInfo.houseid,
        "houseroomid": this.itemInfo.houseroomid,
        "state": int,
        "userid": this.userid,
        "type": type
      }
      openDoorSave(data).then(res=>{
        console.log('set open door info',res)
      })
    },
    closePupop(id){
      switch (id) {
        case 0:
          this.$refs.popup.close()
          break;
        case 1:
          this.$refs.popup1.close()
          break;
        case 2:
          this.$refs.popup2.close()
          break;
        case 3:
          this.$refs.popup3.close()
          break;
        case 4:
          this.$refs.popup4.close()
          break;
        case 5:
          this.$refs.popup5.close()
          break;
        case 6:
          this.$refs.popup6.close()
          break;
        case 7:
          this.$refs.popup7.close()
          break;
      }
    },
    getHouseList(){
      const data = {
        addresslike: this.addresslike,  //模糊查询
        houseattribute: this.houseattribute,  // 出租方式 0-自持 1-托管
        housetype: this.housetype,  // 0-空 1-已租 2-欠租 3-接近交租 4-租约快到期 5-未绑定门锁
        outtype: this.outtype,   //出租方式 0-合租 1-整租
        userid: this.userid
      }
      getHouseList(data).then(res=>{
        if(res.code == 200){
          if(!res.data){
            this.houseList = []
            return
          }
          this.houseList = res.data
        }
      })
    },
    gotocheck(){
      this.closePupop(5)
      this.$refs.popup6.open()
    },
    openBiglock(id){
      this.doorType = id
      // this.$refs.popup2.open()
      // this.closePupop(5)
      this.openDoor()
    },
    openSmllock(id){
      this.doorType = id
      this.openDoor()
    },
    openMima(id){
      this.doorType = id
      console.log('点击密码',this.doorType)
      this.getPassword(6)
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.openDoor{
  width: 100vw;
  box-sizing: border-box;
  height: 100%;
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  .content{
    flex: 1;
    display: flex;
    overflow-y: auto;
  }
  .flex1{
    flex: 1;
    display: flex;
  }
}
.popup-content{
  width: 335px;
  height: 415px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  .con-head{
    width: 100%;
    height: 60px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 60px;
    text-align: center;
    border-bottom: 2px solid #EFEFEF;
  }
  .con-img{
    margin: 19px 0 80px 0;
    img{
      width: 189px;
      height: 189px;
    }
  }
  .con-btn{
    button{
      width: 305px;
      height: 45px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      border-radius: 100px;
    }
    button::after{
      border: 0;
    }
  }
  .getpassword{
    position: absolute;
    right: 15px;
    bottom: 95px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(137deg, #25F28A 0%, #0DBF65 100%);
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
    line-height: 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.open-success{
  width: 335px;
  height: 373px;
  background: #27C58D;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    margin-top: 44px;
    width: 259px;
    height: 137px;
  }
  .text1{
    height: 53px;
    font-size: 38px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 53px;
    margin: 15px 0 6px 0;
    text-align: center;
  }
  .text2{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    text-align: center;
  }
  button{
    margin-top: 20px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
  button::after{
    border: 0;
  }
}
.mima-success{
  width: 335px;
  height: 467px;
  background: #27C58D;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    width: 259px;
    height: 137px;
  }
  .text1{
    height: 67px;
    font-size: 48px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 67px;
    text-align: center;
    margin: 24px 0 9px 0;
  }
  .text2{
    width: 283px;
    height: 44px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 22px;
    text-align: center;
  }
  .btn1{
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
    margin: 24px 0 10px 0;
  }
  .btn2{
    width: 305px;
    height: 45px;
    border-radius: 100px;
    border: 1px solid #FFFFFF;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    background-color: #27C58D;
  }
  button::after{
    border: 0;
  }
}
.lanya{
  width: 335px;
  height: 373px;
  background: #D84243;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    width: 117px;
    height: 115px;
  }
  .text{
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
  }
  .text1{
    margin-top: 38px;
  }
  .btn1{
    margin-top: 31px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
  .btn1::after{
    border: 0;
  }
}
.lanya2{
  width: 335px;
  height: 373px;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img{
    width: 117px;
    height: 115px;
  }
  .text{
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4a4a4a;
    line-height: 30px;
    text-align: center;
    padding: 0 10px;
    
  }
  .text1{
    margin-top: 38px;
  }
  .btn1{
    margin-top: 31px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
  .btn1::after{
    border: 0;
  }
}
.popup1{
  width: 335px;
  height: 212px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  .con-head{
    width: 100%;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 25px;
    position: relative;
    box-sizing: border-box;
    padding: 18px 0;
    text-align: center;
    border-bottom: 1px solid #EFEFEF;
    img{
      position: absolute;
      right: 15px;
      width: 18px;
      height: 18px;
    }
  }
  .btn1{
    margin-top: 20px;
    width: 305px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
  .btn2{
    margin-top: 20px;
    width: 305px;
    height: 45px;
    background: linear-gradient(140deg, #FFCF58 0%, #FFD758 100%);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 45px;
    text-align: center;
  }
}
.lockall{
  width: 335px;
  // height: 415px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  .con-head{
    width: 100%;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 25px;
    position: relative;
    box-sizing: border-box;
    padding: 18px 0;
    text-align: center;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: center;
    align-content: center;
    div{
      padding: 0 34px;
      height: 25px;
      overflow: hidden;
    }
    img{
      position: absolute;
      right: 15px;
      top: 22px;
      width: 18px;
      height: 18px;
    }
  }
  .con-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    .openB{
      width: 169px;
      height: 169px;
    }
    .openS{
      width: 149px;
      height: 149px;
    }
  }
  .getpassword{
    margin-bottom: 20px;
    width: 104px;
    height: 40px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    box-shadow: 0px 2px 4px 0px rgba(252, 174, 55, 0.21), 0px 3px 5px 0px rgba(255, 216, 111, 0.14);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
    text-shadow: 0px 2px 4px rgba(252, 174, 55, 0.21);
  }
}
</style>
